<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
		<style>
			.d1{
							width: 500px;
							height: 500px;
							/*背景颜色属性*/
							background-color: #e4393c; /* #000 */
							border-radius: 50%;
						}
						.d2{
							width: 350px;
							height: 350px;
							/*背景颜色属性*/
							background-color: #ffaa00; /* #000 */
							border-radius: 50%;
							/*相对定位：根据父级进行定位*/
							position: relative;
							left: 75px; /*?值*/
							top: 75px;
						}
						.d3{
							width: 200px;
							height: 200px;
							/*背景颜色属性*/
							background-color: #55ff00; /* #000 */
							/*画圆：1.空间 2.边框/背景颜色填充 3.倒角*/
							border-radius: 50%;
							position: relative;
							left: 75px; 
							top: 75px;
						}
						p{
							width: 20px;
							height: 300px;
							background-color: #00aaff;
							/*定位：相对定位*/
							width: 200px;
							height: 200px;
							border-top: 10px solid red;
							border-left: 10px solid red;
							border-radius: 50%;
							transform: rotate(228deg);
						    left: 423px;
						    top: -76px;
							/* 高级属性：转换属性：旋转、缩放、平移 */
						    transform: rotate(-45deg);
							/*倒角*/
							border-radius: 5px;
						}
						/*微笑表情：边框 倒角 旋转*/
						.d4{
							width: 200px;
							height: 200px;
							border-top: 10px solid red;
							border-left: 10px solid red;
							border-radius: 50%;
							transform: rotate(228deg);
						}
					</style>
				</head>
				<body>
					<!-- 思路：html  4个元素  嵌套
					     1.设置嵌套3个div
						 2.设置1个p
						      css 
						选择器：抓取页面元素  ②类选择器，任何元素通用属性class="别名"
						                          css样式：.别名，抓取元素添加效果【样式】  
					-->
			        <div class="d1">
			        	<div class="d2">
			        		<div class="d3"></div>
			        	</div>
			        </div>
					<p></p>
					<!-- 微笑表情 -->
					<div class="d4"></div>
				</body>
			</html>